<template>
	<view :style="showVoiceInput?'padding-bottom:290rpx':''" class="content">
		<view class="info-block">
			<view class="title FangZhengHanZhenGuangBiaoJianTi">个人信息</view>
			<!-- <view class="info-item">
				<view class="name-item">
					<view class="must">*</view>
					<view class="name">姓名</view>
				</view>
				<input placeholder="请输入姓名" v-model="form.realName" maxlength="18" type="text" class="form-ctrl" />
			</view> -->
			<view class="info-item">
				<view class="name-item">
					<view class="must">*</view>
					<view class="name">手机号码</view>
				</view>
				<input placeholder="请输入手机号码" v-model="form.mobile" maxlength="11" type="number" class="form-ctrl"
					disabled="disabled" />
			</view>
		</view>
		<view class="info-block">
			<view class="title FangZhengHanZhenGuangBiaoJianTi">问题内容</view>
			<view class="info-item">
				<view class="name-item">
					<view class="must">*</view>
					<view class="name">地址</view>
				</view>
				<input placeholder="点此选择所在地址" v-model="form.address" maxlength="18" @click="chosenPosition" type="text"
					placeholder-class="inputPlaceholder" class="form-ctrl" disabled />
				<image src="../../static/clap/location.png" style="width: 25rpx; height: 30rpx;"></image>
			</view>
			<view class="info-item">
				<view class="name-item">
					<view class="must">*</view>
					<view class="name">详细地址</view>
				</view>
				<input placeholder="请输入详细地址" v-model="form.detAddress" maxlength="100" type="text" class="form-ctrl" />
			</view>
			<view class="info-item">
				<view class="name-item">
					<view class="must">*</view>
					<view class="name">问题类型</view>
				</view>
				<picker range-key="name" @change="bindType" :range="type" class="form-ctrl">
					{{type[questionTypeIndex]['name']}}
				</picker>
				<image src="../../static/mine/more.png" style="width: 25rpx; height: 30rpx; text-align: right;">
				</image>
			</view>
			<view class="info-item1">
				<view class="name-item">
					<view class="must">*</view>
					<view class="name">上传图片</view>
				</view>
				<view class="upload-item">
					<!-- <view @click="closeImg(1)" v-if="form.nearImg" style="width: 100%;">
						<view class="delete-item">
							<image src="/static/delete.png" class="delete">
							</image>
						</view>
					</view>
					<image :src="form.nearImg" class="photo" mode="aspectFill" v-if="form.nearImg"></image>
					<view class="upload-content" v-else @click="chooseImg(1)">
						<image src="/static/clap/upload.png" style="width: 100rpx;height: 100rpx;" class="upload">
						</image>
					</view> -->
					<view v-for="(item,index) in form.nearImg" class="image-item">
						<image mode="aspectFit" :src="item" @click="previewImg(item)" class="img">
						</image>
						<view @click="closeImg(index,1)" style="display: inline;">
							<view class="iconfont">
								<image src="/static/delete.png" class="delete"></image>
							</view>
						</view>
					</view>
					<view class="upload-content" v-if="form.nearImg.length<6" @click="chooseImg">
						<image src="/static/clap/upload.png" class="upload"></image>
					</view>
				</view>
				<view class="tipe">请上传至少一张近景照片(方便工作人员查看具体问题)</view>
				<view class="upload-item">
					<view v-for="(item,index) in form.farImg" class="image-item">
						<image mode="aspectFit" :src="item" @click="previewImg(item)" class="img">
						</image>
						<view @click="closeImg(index,2)" style="display: inline;">
							<view class="iconfont">
								<image src="/static/delete.png" class="delete"></image>
							</view>
						</view>
					</view>
					<view class="upload-content" v-if="form.farImg.length<3" @click="chooseFarImg">
						<image src="/static/clap/upload.png" class="upload"></image>
					</view>
					<!-- <view @click="closeImg(2)" v-if="form.farImg" style="width: 100%;">
						<view class="delete-item">
							<image src="/static/delete.png" class="delete">
							</image>
						</view>
					</view>
					<image :src="form.farImg" class="photo" mode="aspectFill" v-if="form.farImg"></image>
					<view class="upload-content" v-else @click="chooseImg(2)">
						<image src="/static/clap/upload.png" style="width: 100rpx;height: 100rpx;" class="upload">
						</image>
					</view> -->
				</view>
				<view class="tipe">请上传至少一张远景照片(方便工作人员找到问题所在位置)</view>
			</view>
			<view class="info-item1">
				<view class="name-item">
					<!-- <view class="must">*</view> -->
					<view class="name">上传视频</view>
				</view>
				<view class="upload-item">
					<view class="image-item1" style="width: 100%;">
						<video :src="form.video" class="video" enable-play-gesture="true" :enable-play-gesture="true"
							auto-pause-if-navigate="true" auto-pause-if-open-native="true" show-center-play-btn="true"
							show-fullscreen-btn="true" show-play-btn="true" custom-cache="false" v-if="form.video!=''"
							style="width: 100%;"></video>
						<view @click="closeVideo(index)" style="display: inline;">
							<view class="iconfont" v-if="form.video!=''">
								<image src="/static/delete.png" class="delete"></image>
							</view>
						</view>
					</view>
					<view class="upload-content" @click="chooseVideo" v-if="form.video==''">
						<image src="/static/clap/upload.png" class="upload"></image>
					</view>
				</view>
				<view class="tipe">请上传小于一分钟的视频</view>
			</view>

			<view class="info-item1">
				<view class="name-item">
					<view class="must">*</view>
					<view class="name">问题描述</view>
				</view>
				<image @click="changeVoiceInputShow(true)" src="/page_other/static/voice.png" class="voice"></image>
				<textarea class="form-ctr" placeholder="请输入问题描述..." placeholder-class="inputPlaceholder"
					v-model="form.content" maxlength="100"></textarea>
			</view>
		</view>
		<view class="btn-item">
			<view class="btn" @click="submit">提交</view>
		</view>
		<VoiceInput @hide="changeVoiceInputShow(false)" @discern="discern" v-if="showVoiceInput"></VoiceInput>
	</view>
</template>

<script>
	import VoiceInput from '@/page_other/components/VoiceInput.vue'
	import {
		validate
	} from '@/util/validate.js'
	import {
		insertPlant,
		getCategoryListByPidApi
	} from '@/api/clap.js'
	import {
		getStorage
	} from '@/util/auth'
	export default {
		components: {
			VoiceInput
		},
		data() {
			return {
				showVoiceInput: false,
				form: {
					id: 0,
					//realName: '',
					mobile: '',
					address: '',
					detAddress: '',
					latitude: '',
					longitude: '',
					content: '',
					video: '',
					questionType: -1,
					pic: [],
					farImg: [],
					nearImg: []
				},
				rules: {
					// realName: {
					// 	name: '姓名',
					// 	required: true
					// },
					mobile: {
						name: '手机号码',
						required: true,
					},
					address: {
						name: '地址',
						required: true,
					},
					detAddress: {
						name: '详细地址',
						required: true,
					},
					content: {
						name: '问题描述',
						required: true,
					},
					typeIndex: {
						name: '问题类型',
						required: true,
						validator: function(value, form, callback) {
							if (value < 0) {
								callback('问题类型')
							}
							callback();
						}
					},
					nearImg: {
						name: '近景照片',
						required: true,
					},
					farImg: {
						name: '远景照片',
						required: true,
					},
					// pic: {
					// 	name: '图片',
					// 	required: true,
					// 	validator: function(value, form, callback) {
					// 		if (value.length < 0) {
					// 			callback('图片不能为空')
					// 		}
					// 		callback();
					// 	}
					// },
				},
				max: 6,
				type: [{
						id: 1,
						value: '环境卫生'
					},
					{
						id: 2,
						value: '公共交通'
					}
				],
				questionTypeIndex: 0
			}
		},
		methods: {
			discern(e) {
				this.form.content = e;
			},
			changeVoiceInputShow(show) {
				this.showVoiceInput = show;
				if (show) {
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 9999999,
							duration: 500
						})
					})
				}
			},
			bindType(e) {
				this.questionTypeIndex = e.detail.value;
			},
			getCategoryListByPid() {
				getCategoryListByPidApi().then(data => {
					this.type = data;
				})
			},
			chosenPosition() {
				var that = this;
				const currentLocation = uni.getLocation({
					isHighAccuracy: true,
					success(current) {
						const currentLatitude = current.latitude;
						const currentLongitude = current.longitude;
						uni.chooseLocation({
							latitude: currentLatitude,
							longitude: currentLongitude,
							success: (choosen) => {
								delete choosen.errMsg;
								that.form.address = choosen.address;
								that.form.latitude = choosen.latitude;
								that.form.longitude = choosen.longitude;
							},
							fail: (err) => {
								console.log(err);
								this.showToast('选择位置失败，请重试！');
							}
						})
					},
					fail: (e) => {
						console.log(e);
						this.showToast('获取位置失败，请重试！');
					}
				})
			},
			//上传图片
			chooseImg() {
				let loginInfo = getStorage('login');
				uni.chooseImage({
					count: 6 - this.form.nearImg.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					uplodaType: 3,
					success: (res) => {
						res.tempFilePaths.forEach(item => {
							let tempFilePaths = item
							uni.showLoading({
								title: '上传中',
								mask: true
							})
							uni.uploadFile({
								url: 'https://ssp.yumentv.cn/api/upload?uploadType=2', //post请求的地址
								filePath: tempFilePaths,
								name: 'multipart',
								formData: {},
								header: {
									'authori-zation': loginInfo.token
								},
								success: (myres) => {
									uni.hideLoading()
									const data = JSON.parse(myres.data);
									if (data.code == 200) {
										uni.hideLoading()
										this.form.nearImg.push(data.data)
										// this.form.pic.push(data.data)
									} else {
										uni.hideLoading()
										this.showToast('上传失败');
									}
								}
							})
						})
					}
				})
			},
			chooseFarImg() {
				let loginInfo = getStorage('login');
				uni.chooseImage({
					count: 3 - this.form.farImg.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					uplodaType: 3,
					success: (res) => {
						res.tempFilePaths.forEach(item => {
							let tempFilePaths = item
							uni.showLoading({
								title: '上传中',
								mask: true
							})
							uni.uploadFile({
								url: 'https://ssp.yumentv.cn/api/upload', //post请求的地址
								filePath: tempFilePaths,
								name: 'multipart',
								formData: {},
								header: {
									'authori-zation': loginInfo.token
								},
								success: (myres) => {
									uni.hideLoading()
									const data = JSON.parse(myres.data);
									if (data.code == 200) {
										uni.hideLoading()
										this.form.farImg.push(data.data)
										// this.form.pic.push(data.data)
									} else {
										uni.hideLoading()
										this.showToast('上传失败');
									}
								}
							})
						})
					}
				})
			},
			//预览图片
			previewImg(current) {
				uni.previewImage({
					current,
					urls: this.form.pic
				})
			},
			// 删除图片
			closeImg(index, e) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除当前图片',
					success: function(res) {
						if (res.confirm) {
							if (e == 1) {
								that.form.nearImg.splice(index, 1);
								//that.form.nearImg = ''
							}
							if (e == 2) {
								that.form.farImg.splice(index, 1);
								//that.form.farImg = ''
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//上传视频
			chooseVideo() {
				var self = this;
				let loginInfo = getStorage('login');
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: res => {
						let file = res.tempFilePath;
						console.log(res)
						if (res.duration > 60) {
							this.showToast('视频时长不能大于60秒');
							return;
						}
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						uni.uploadFile({
							url: 'https://ssp.yumentv.cn/api/upload', //post请求的地址
							filePath: file,
							name: 'multipart',
							formData: {},
							header: {
								'authori-zation': loginInfo.token
							},
							success: (myres) => {
								uni.hideLoading()
								const data = JSON.parse(myres.data);
								if (data.code == 200) {
									this.form.video = data.data
								} else {
									this.showToast('上传失败');
								}
							},
							fail() {
								uni.hideLoading()
								this.showToast('上传失败');
							}
						})
					}
				});
			},

			// 删除视频
			closeVideo(index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除当前视频',
					success: function(res) {
						if (res.confirm) {
							that.form.video = '';
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			submit() {
				uni.showLoading({
					title: '发布中',
					mask: true
				});
				let form = JSON.parse(JSON.stringify(this.form));
				form.questionType = this.type[this.questionTypeIndex].id;
				form.pic = form.nearImg.join(',') + ',' + form.farImg.join(',');
				if (validate(form, this.rules)) {
					insertPlant(form).then((res) => {
						uni.showToast({
							title: '发布成功',
							icon: 'success',
							duration: 1000,
							mask: true,
							success: function() {
								setTimeout(function() {
									uni.redirectTo({
										url: '/page_other/my-clap/my-clap'
									})
								}, 1000)
							},
						})
					}).catch((res) => {
						uni.hideLoading()
						this.showToast('发布失败');
					})
				}
			},
		},
		onShow() {

			const loginInfo = getStorage('login');
			if (!loginInfo) {
				this.showToast('请先登录', () => {
					uni.navigateBack()
				})
				return;
			}
			this.form.mobile = loginInfo.mobile;
		},
		onLoad() {
			this.getCategoryListByPid()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #FAFAFA;
	}

	.content {
		padding: 30rpx;
		background: #f5f5f5;
		position: relative;

		.info-block {
			display: flex;
			flex-direction: column;
			background: #fff;
			border-radius: 30rpx;
			height: auto;
			padding: 30rpx;
			box-shadow: 0 0 10px 0 #dedede;
			margin-top: 30rpx;

			.title {
				color: #027BFD;
				font-size: 38rpx;
			}

			.info-item {
				display: flex;
				flex-direction: row;
				margin-right: 20rpx;
				height: 86rpx;
				border-bottom: 1rpx solid #f5f5f5;
				align-items: center;

				.name-item {
					display: flex;
					flex-direction: row;
					line-height: 60rpx;
					width: 170rpx;

					.must {
						color: #FF0000;
					}

					.name {
						font-size: 28rpx;
					}
				}

				.form-ctrl {
					font-size: 28rpx;
					width: calc(100% - 180rpx);
					line-height: 60rpx;
					text-align: left;
				}
			}

			.info-item1 {
				display: flex;
				flex-direction: column;
				margin-top: 30rpx;
				border-bottom: 1rpx solid #f5f5f5;
				position: relative;

				.voice {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					right: 0rpx;
					bottom: 20rpx;
					z-index: 99;
				}

				.name-item {
					display: flex;
					flex-direction: row;
					height: 60rpx;
					width: 100%;

					.must {
						color: #FF0000;
					}
				}

				.upload-item {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;

					.image-item {
						margin-right: 20rpx;
						display: flex;
						flex-direction: row;
						// box-sizing: border-box;
						// border: 1px solid #efefef;

						.img {
							width: 190rpx;
							height: 200rpx;
							border-radius: 20rpx;
						}

						.iconfont {
							.delete {
								width: 20px;
								height: 20px;
								position: absolute;
								margin-left: -30rpx;
							}
						}
					}

					.image-item:nth-child(3n) {
						margin-right: 0;
					}

					.delete-item {
						width: 100%;
						display: flex;
						justify-content: flex-end;

						.delete {
							width: 20px;
							height: 20px;
							position: absolute;
						}
					}

					.image-item1 {
						display: flex;
						flex-direction: row;

						.delete {
							margin-top: 10rpx;
							margin-left: -40rpx;
							width: 20px;
							height: 20px;
							position: absolute;
						}
					}

					.upload-content {
						background: #fafafa;
						border-radius: 5px;
						width: 200rpx;
						height: 200rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 20rpx;

						.upload {
							width: 90rpx;
							height: 90rpx;
						}
					}
				}

				.tipe {
					color: #999;
					//border-bottom: 1rpx solid #f5f5f5;
					margin: 20rpx 0;
					font-size: 28rpx;
				}
			}

			.info-item:last-child {
				border-bottom: 0;
			}

			.form-ctr {
				font-size: 28rpx;
				width: calc(100% - 60rpx);
				text-align: left;
				border-radius: 5px;
				background: #f5f5f5;
				padding: 30rpx;
			}
		}

		.btn-item {
			display: flex;
			justify-content: center;
			padding: 30rpx;

			.btn {
				background: #027BFD;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 300rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				height: 70rpx;
			}
		}
	}
</style>